<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/3/26
  Time: 19:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<% String path = request.getContextPath()+"/"; %>
<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <base href="<%=path%>" >
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="layui/lib/layui/css/layui.css">
    <link rel="stylesheet" href="js/tree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="layui/lib/layui/layui.js" charset="utf-8"></script>
</head>
<body>


<div style="margin: 0 10px  " class="layui-container">

    <div class="layui-row">
        <div class="layui-col-md5">
            <div id="treeDemo" class="ztree" ></div>
        </div>
        <div class="layui-col-md7" style="border-left: 1px solid grey ;height: 100%" >

            <form class="layui-form" id="form1" action="">
                <input type="hidden" name="id" id="id"/>
            <div class="layui-form-item">
                <label class="layui-form-label">资源名称</label>
                <div class="layui-input-block">
                    <input type="text" name="resourceName" id="resourceName" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">父级资源</label>
                <div class="layui-input-block">
                    <input type="hidden" id="parentId" name="parentId" />
                    <input type="text" id="chooseParent"  placeholder="请选择父级资源" autocomplete="off" class="layui-input">
                    <div id="deptTree" style="display: none;z-index: 10000;float: left;position: absolute;background-color:white;border: 1px solid #EFEEF0;width: 100%;height: 150px;overflow: auto">
                        <div id="closeMenu" style="text-align: right">
                            <a href="javascript:void(0)" ><i style="color: red;font-size: 20px" class="layui-icon ">&#x1007;</i></a>
                        </div>
                        <div id="treeDemo2" class="ztree" ></div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">资源图标</label>
                <div class="layui-input-block">
                    <input type="text" name="resourceIcon" id="resourceIcon" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">资源路径</label>
                <div class="layui-input-block">
                    <input type="text" name="resourceUrl" id="resourceUrl" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">资源类型</label>
                <div class="layui-input-block">
                    <select name="resourceType" id="resourceType" lay-verify="required">
                        <option value="0">菜单</option>
                        <option value="1">按钮</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">权限标识</label>
                <div class="layui-input-block">
                    <input type="text" id="resourcePermission" name="resourcePermission"  placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-block">
                    <input type="text" id="resourceSort" name="resourceSort" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" >
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn save" type="button" >立即提交</button>
                    <button type="button" id="res" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
            </form>

        </div>
    </div>

</div>

</body>

<script type="text/javascript" src="js/tree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/tree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="js/tree/js/jquery.ztree.exedit.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['form','layer'], function(){
        let form=layui.form,
            layer=layui.layer;
     $("#res").click(function (){
         $("#form1")[0].reset()
         $("#id").val("")
     })
        // 表单保存数据到树
        $('.save').click(function () {

                let parma = $('#form1').serialize();
                $.ajax({
                    url:'system/resource',
                    dataType:'json',
                    type:'post',
                    data:parma,
                    success:function (ret) {
                        if (ret.status){
                            layer.msg("保存成功",function () {
                                createTree();
                                $("#id").val('');
                                $("#form1")[0].reset();
                            })
                        }else {
                            layer.msg("操作失败");
                        }
                    }
                });
        });




        //创建树状对象
        var zTreeObj;
        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var setting = {
            data:{
              simpleData:{
                  enable: true,
                  idKey: "id",
                  pIdKey: "pid",
                  rootPId: 0
              }
            },
            // 点击把数据传到表单中，进行修改
            callback:{
                onClick:treeNodeClick,
                beforeRemove:deleteNode
            },
            //删除(点击删除触发beforeRemove函数，用户判定是否要删除)
            edit:{
                enable:true,
                showRemoveBtn:true,
                showRenameBtn:false
            }
        };

        function deleteNode(treeId,treeNode) {
            let id = treeNode.id;
            $.ajax({
                url: 'system/resource/'+id,
                dataType: 'json',
                type: 'delete',
                async:false,
                success:function (ret) {
                    if (!ret.status){
                        layer.msg("删除失败");
                        return false;
                    }else {
                        layer.msg("删除成功")
                        return true;
                    }
                }
            })

        }
        var setting2 = {
            data:{
                simpleData:{
                    enable: true,
                    idKey: "id",
                    pIdKey: "pid",
                    rootPId: 0
                }
            },
            // 点击把数据传到表单中，进行修改
            callback:{
                onClick:chooseResource,
            }
        };

        function chooseResource(event,treeId,treeNode) {
            $("#chooseParent").val(treeNode.name);
            $("#parentId").val(treeNode.id);
            $("#deptTree").hide();
        }
        $("#closeMenu").click(function () {
            $("#deptTree").hide();
        })

        function treeNodeClick(event,treeId,treeNode) {
            //拿到的父级id
            let id = treeNode.id;
            $.getJSON("system/resource/"+id,function (ret) {
                // alert(JSON.stringify(ret))
                // 拿到的ret里的json对象，修改form表单组件
                $("#resourceName").val(ret.name);
                $("#parentId").val(ret.parentId);
                $("#id").val(ret.id);
                $("#resourceIcon").val(ret.resourceIcon);
                $("#resourcePermission").val(ret.resourcePermission);
                $("#resourceSort").val(ret.resourceSort);
                $("#resourceType").val(ret.resourceType);
                $("#resourceUrl").val(ret.resourceUrl);
                $("#chooseParent").val(ret.parent.name);
                form.render();
            })
        }

        // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
        var zNodes;

        $(document).ready(function(){
            createTree();
            let height = $(document).height();
            $(".layui-col-md7").css("height",height+"px");
        });

        //拿树的数据
        function createTree() {
            $.getJSON("system/resource/treeData",function (ret) {
                zNodes = $.fn.zTree.init($("#treeDemo"), setting, ret);
                zNodes = $.fn.zTree.init($("#treeDemo2"), setting2, ret);
                var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                //展开
                treeObj.expandAll(true);
            })
        }

        $("#chooseParent").focus(function () {
            $("#deptTree").show();
        })






    });

</script>
</html>